﻿var Checkbox = {
    model: function (d = {}) {
        this.Title = d.Title || "多项选择";
        this.EnTitle = d.EnTitle || "";
        this.Tips = d.Tips || "";
        this.Name = d.Name || 'lg' + lg.GetSN(6, 10);
        this.Value = d.Value || [];
        this.ExportName = d.ExportName || "";
        this.Width = d.Width || "100%";
        this.Required = d.Required || false;
        this.IsRender = d.IsRender != undefined ? d.IsRender : true;
        this.IsShow = d.IsShow || false;
        this.IsExport = d.IsExport || false;
        this.IsWhere = d.IsWhere || false;
        this.WhereKey = d.WhereKey || "精确匹配";
        this.Options = d.Options || [
            {
                Text: "选项1",
                Id: lg.GetSN(6, 10),
                ControlItems: [],
                Icon: "",
                NeedOtherValue: false
            },
            {
                Text: "选项2",
                Id: lg.GetSN(6, 10),
                ControlItems: [],
                Icon: "",
                NeedOtherValue: false
            }
        ];
        this.Display = d.Display || "inline";
        this.IconOptions = d.IconOptions || false;
    },
    component: {
        name: "lg-form-checkBox",
        data: {
            props: {
                items: {
                    type: Array,
                    default: []
                },
                value: {
                    type: [String, Object],
                    default: []
                },
                data: {
                    type: Object,
                    default: {}
                },
                valType: {
                    type: String,
                    default: "option"
                },
                //0填写 1查看
                renderType: {
                    type: Number,
                    default: 0
                }
            },
            mounted: function () {
                if (typeof this.value != "object") {
                    this.value = [];
                }
            },
            methods: {
                Checked: function (item) {
                    if (this.value.length > 0) {
                        if (this.valType == "option") {
                            return this.value.filter(opt => opt.opid == item.Id).length > 0
                        } else {
                            return this.value.filter(val => val == item.Value || val == item.Text).length > 0
                        }
                    } else {
                        return false;
                    }

                },
                OnCheck: function (item) {
                    var value = this.value;
                    if (this.valType == "option") {
                        var arry = value.filter(v => v.opid != item.Id);
                        if (arry.length == value.length) {
                            value.push({ "opid": item.Id, "value": item.Text });
                        } else {
                            value = arry;
                        }
                    } else {
                        var checkVal = item.Value || item.Text;
                        var arry = value.filter(v => v != checkVal);
                        if (arry.length == value.length) {
                            value.push(checkVal);
                        } else {
                            value = arry;
                        }
                    }
                    this.$emit("update:value", value);
                    this.$emit("done", this.data);
                }
            },
            template: `
			<div :class="['lg-form-item',{'lg-ver-error':data.error},{'pointer-none':renderType==1}]" :style="{'width':data.Width}">
				<div class="lg-form-block">
					<div class="lg-form-title">
						<div class="lg-form-title-item">
                        	<i v-if="data.Required">*</i>
			            	<span class="cn">{{data.Title}}</span>
                        	<span class="en">{{data.EnTitle}}</span>
			         	</div>
					</div>
					<div class="lg-form-control">
                        <div :class="['lg-form-check-box',{'flex-column':data.Display=='block'}]">
						    <div class="lg-form-check" v-for="item in data.Options" :class="{'lg-checked':Checked(item)}" v-on:click="OnCheck(item)">
							    <i class="lg-form-check-icon"></i>
							    <span>{{item.Text}}</span>
						    </div>
						</div>
					</div>
				</div>
				<div class="lg-form-block">
					<div class="lg-form-tip"><p>{{data.Tips}}</p></div>
					<div class="lg-form-ver" v-if="data.error">{{data.errMsg}}</div>
				</div>
			</div>`
        }
    }
}

Checkbox.model.prototype.verify = function () {
    console.log(this.Value)
    var res = { state: true, msg: "ok" };
    if (this.Required) {
        var value =this.Value
        if (value.length == 0) {
            res.state = false;
            res.msg = "必填项不可为空!";
            return res;
        }
    }
    return res
}
Checkbox.model.prototype.getValue = function () {
    if (typeof this.Value == 'object' && this.Value.length == 0) {
        return ""
    }
    return this.Value;
}
Checkbox.model.prototype.setValue = function (data) {
    this.Value = lg.convert.toJson(data[this.Name], []);
}


export { Checkbox }